Background-attchment- 金魚都能懂的CSS必學屬性

12th鐵人賽 css教學 css 金魚都能懂網頁教學

CSScoke

2020-10-06 16:44:22

9273 瀏覽

分享至

background-attachment 主要用途是設定背景圖片位置的捲動或固定，看起來很像是 background-position 對吧？但他實際上是設定你捲動時背景圖的位置是否改變的一種屬性

background-attachment: scroll;

這個屬性說實在的，其實不太能算是一個金魚必學的屬性，但由於目前有太多的商業樣版網站，利用到這個屬性去做簡易的視差捲動效果，炫的讓人愛到不要不要的，導致 Amos 不得不介紹一下。

background-attachment 可以設定的值是關鍵字，主要設定的關鍵字有以下幾個

scroll
fixed
local

其中 background-attachment: local; 是比較少人見到的，而 fixed 則是大家超愛的！就讓我們繼續看下去吧。

接下來的示範會以內部區塊為主，讓大家看該屬性值的效果

做測試的原始碼則會如下

HTML

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil adipisci eligendi aliquam natus officia quibusdam, in omnis alias odio. Ad fugiat quas voluptatum tempore tenetur necessitatibus delectus beatae! Quia, libero.</p>
  <!-- 上面段落請複製30個-->
</div>

<!-- 以下段落也請複製30個-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil adipisci eligendi aliquam natus officia quibusdam, in omnis alias odio. Ad fugiat quas voluptatum tempore tenetur necessitatibus delectus beatae! Quia, libero.</p>

CSS

body{
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}
div{
  width: 900px;
  height: 500px;
  border:5px solid gray;
  margin: 70px;
  overflow: auto;
  background-color: #ffc;
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

呈現畫面預覽

Scroll 跟著捲走了

背景圖常見的就是當你的頁面上下捲動時，背景圖片也會跟著捲動離開所見範圍，scroll 就是這樣的一個作用，且瀏覽器預設使用的 background-attachment 值，也是 scroll，但須要特別注意的是，當你的子區塊(畫面中淺黃色區域)，也是使用了 background-attachment: scroll 時，該區塊內部的卷軸捲動，將不會讓背景圖跟著被捲走，這部分你可以把 background-attachment 的觀念拆成兩部分來看，scroll 基本上會根據「視窗的捲軸」來捲動，所以當我今天內部物件的捲軸捲動時，該物件內部的背景圖片是不會被捲走的，就像下圖所示

示意圖

這樣的效果就像是內部的區塊背景被 fixed 在該區塊內了，對於要做區塊內的背景固定，算是一個不錯的設定方式，以上設定效果，各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/1/

Fixed 固定你的背景圖不要滾動

background-attachment: fixed; 時，你的背景將會使用視窗可見範圍(viewport)當作定位空間，所以一旦設定了 fixed 之後，你的圖片位置就會跑到預設的視窗左上角去了，但請注意，淺黃色區塊內的圖片雖然位置跑到視窗左上角去，但超過區塊空間範圍以外的部分，是看不到的喔，你看到的其實是 body 標籤內的背景圖，千萬別誤會了！

示意圖

以上設定效果，各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/2/

Local 是甚麼我沒看過

background-attachment: local; 應該是許多人比較少見，且較少使用到的一個關鍵字了(至少 Amos 不常用到它)，它的特性比較像是 scroll 的狀況，但是 local 所看的空間是背景圖片的所在空間，所以各位可以看到下所示，背景圖片會「跟著所在空間的捲軸」捲走，所以可以看到內部的淺黃色區塊捲動捲軸時，該區塊的背景圖就會跟著被捲走。

示意圖

以上設定效果，各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/3/

最常見的簡易版視差捲動

目前有許多的商業樣版網站，都會做簡易的是差捲動效果，為何會說簡易？因為他就只是利用 background-attachment: fixed; 來將背景圖片固定，背景圖其實沒有視差的些微移動，只是露出背景罷了，簡單來看一下示範的原始碼

HTML

<div class="section topic1">topic1</div>
<div class="section topic2">topic2</div>
<div class="section topic3">topic3</div>
<div class="section topic4">topic4</div>
<div class="section topic5">topic5</div>
<div class="section topic6">topic6</div>

CSS

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
.section{
	width: 100%;
	height: 100vh;
	background-color: #666;
	color: #fff;
	font-size: 200px;
	line-height: 100vh;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
.topic1{ 
	background-image: url("background-attachment-05.jpg"); 
}
.topic3{ 
	background-image: url("background-attachment-06.jpg"); 
}
.topic5{ 
	background-image: url("background-attachment-07.jpg"); 
}

呈現效果

示意圖

以上設定效果，各位也可以參考這邊的原始碼畫面 https://codepen.io/bad_printer/pen/MWegOLp

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧